<template>
	<div>
		<d2-container v-if="!userShow">
			<div slot="header" style="display:flex; justify-content: space-between;">
				<div>用户管理</div>
				<div>
					<el-form :inline="true" class="demo-form-inline" size="small">
						<el-form-item label="时间" size="small">
							<el-date-picker
								v-model="date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								format="yyyy 年 MM 月 dd 日"
								value-format="yyyy-MM-dd"
							></el-date-picker>
						</el-form-item>
						<el-form-item label="用户名"><el-input placeholder="用户名" v-model="nickname"></el-input></el-form-item>
						<el-form-item><el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button></el-form-item>
					</el-form>
				</div>
			</div>
			
				<template>
					<el-table  stripe style="width: 100%" :data="userData">
						<el-table-column type="index" width="50" label="序号"></el-table-column>
						<el-table-column prop="date" label="头像" >
							<template slot-scope="scope">
								<el-avatar :src="scope.row.avatar" :size="50" v-if="scope.row.avatar!=null"></el-avatar>
							</template>
						</el-table-column>
						<el-table-column prop="nickname" label="昵称"></el-table-column>
						<el-table-column prop="created_at" label="注册时间" ></el-table-column>
						<el-table-column prop="token_time" label="最近登陆时间" ></el-table-column>
						<el-table-column prop="balance" label="余额" ></el-table-column>
						<el-table-column label="状态" >
							<template slot-scope="scope">
								<el-tag v-if="scope.row.state==1">正常</el-tag>
								<el-tag type="danger" v-if="scope.row.state==2">异常</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" size="small" @click="onState(scope.row.id)" v-if="scope.row.state==1">封禁</el-button>
								<el-button type="text" size="small" v-if="scope.row.state==2" @click="onState(scope.row.id)">解封</el-button>
								<el-button type="text" size="small" @click="onConsumption(scope.row.id)">消费明细</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
				<!-- 分页 -->
				<template slot="footer">
					<el-pagination
						@current-change="handleCurrentChange"
						:current-page="page.current"
						layout="total, prev, pager, next, jumper"
						:total="page.total"
						:page-size="page.size"
					></el-pagination>
				</template>
			
		</d2-container>
		<detailed v-model="userShow" :userid="userid"></detailed>
	</div>
	
</template>

<script>
	import detailed from './detailed'
	import {getUser,getUserState} from '@/api/api'
	import dayjs from 'dayjs';
	export default{
		components:{
			detailed
		},
		data(){
			return{
				date:'',
				userShow:false,
				userData:[],
				userid:-1,
				page: {
					//分页
					total: 20,
					current: 1,
					size: 10
				},
				nickname:''
			}
		},mounted(){
			this.getUserData()
		},
		methods:{
			//列表
			getUserData(){
				let data={
					page:this.page.current,
					nickname:this.nickname,
					start_time:this.date[0],
					end_time:this.date[1]
				}
				getUser(data).then(res=>{
					if(res.state==0){
						this.userData=res.data.data
						for(var i=0;i<this.userData.length;i++){
								//时间戳转换为日期格式
							this.userData[i].token_time=dayjs(this.userData[i].token_time*1000).format('YYYY-M-D HH:mm:ss')
						}
						this.page.size=res.data.per_page;
						this.page.total=res.data.total
					}
				})
			},
			//查询
			onSearch(){
				this.page.current=1;
				this.getUserData()
			},
			//封号和解除
			onState(id){
				this.$confirm('此操作将更改该用户使用状态, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					getUserState(id).then(res=>{
						if(res.state==0){
							this.$message.success("更改成功!");
							this.getUserData();
						}
					})
				});
			},
			onConsumption(id){
				this.userid=id;
				this.userShow=true;
			},
			//分页
			handleCurrentChange(val) {
				this.page.current = val;
				this.getUserData();
			},
			
		}
	}
</script>

<style>
</style>
